<script setup>
import {ref, vShow} from 'vue'
const points = ref(97)
// function increment(){
//   points.value++
// }
// const ruduce = ()=>{
//    if (points.value > 0) {
//     points.value -= 10 // 等价于 points.value = points.value - 10
//   }
// }
</script>
<!-- 在 <script>中是引入其他文本-->
<!-- 在<tempalte>中主要是写页面代码展示样式 -->

<template>
   
  <div v-show="points<100">普通会员</div>
  <div v-show="points>=100 && points<200" >白银会员</div>
  <div v-show="points>=200">黄金会员</div>
  <div>会员积分：{{ points }}</div>
 
  <button @click="points=points+10">
   会员积分+10
  </button>
  <!-- 选择结构让积分下限为0 -->
<button @click="points=(points-10)<0?0:(points-10)">
   会员积分-10
  </button>

 </template>
<!-- 在 <style>中主要是写页面结构的格式，加上scoped时只能影响当前文本的样式-->
<style scoped>

</style>
